<!-- 
 * 实名认证页面
 * @author: 
 * @since: 2022-05-17
 * certification.vue
-->
<template>
  <div class="certification-container p20 detailsPageBox">
    <div class="detailsMain">
      <div class="person" v-if="state.userInfo.userType === 'PERSON'">
        <registerUserInfo :userInfo="state.userInfo" @backInfo="backInfo"></registerUserInfo>
      </div>
      <div class="company" v-if="state.userInfo.userType === 'COMPANY'">
        <companyInfo :userInfo="state.userInfo" @backInfo="backInfo"></companyInfo>
      </div>
    </div>
    <div class="detailsHandleBtn">
      <el-button type="primary" size="mini" @click="pass">通过</el-button>
      <el-button size="mini" @click="reject">拒绝</el-button>
    </div>

    <el-dialog v-model="isAuditDialog" title="审核确认" width="400px" :before-close="() => (isAuditDialog = false)">
      <div>
        你确认用户
        <span>{{ state.userAuthenticationInfo.name }}</span>
        通过审核吗？
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogHandle(1)" size="mini">确定</el-button>
          <el-button @click="dialogHandle(0)" size="mini">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="isRejectDialog" title="请填写拒绝原因" width="600px" :before-close="rejectCancel">
      <el-input v-model="state.auditContent" :rows="8" type="textarea" placeholder="请填写信息审核拒绝原因" clearable />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogHandle(1)" size="mini">确定</el-button>
          <el-button @click="dialogHandle(0)" size="mini">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { sessionstorage } from '@/utils/storage.js'
import { userAuthenticationAuditApi } from '@/api/interface/registerUserManage.js'
import { successHandle, detailHandleFinish } from '@/utils/common.js'

const router = useRouter();
const store = useStore();



const isAuditDialog = ref(false)//是否显示审核弹出框
const isRejectDialog = ref(false)//是否显示拒绝弹出框
const state = reactive({
  userInfo: {},//注册用户信息
  userAuthenticationInfo: {},//用户认证信息
  auditType: '',//审核状态
  auditContent: 'SUCCESS',//审核内容

})
state.userInfo = sessionstorage.get('registerUserInfo')

onMounted(() => {
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level);

})

onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2);
})

const backInfo = (data) => {
  state.userAuthenticationInfo = data
}



//通过
const pass = (type) => {
  isAuditDialog.value = true;
  state.auditType = 'SUCCESS'
}

//弹窗操作
const dialogHandle = (type) => {//1.确定 0.取消
  switch (type) {
    case 1:
      const params = {
        auditBusinessNum: state.userAuthenticationInfo.id,
        userName: state.userAuthenticationInfo.userName,
        auditType: state.auditType,
        auditContent: state.auditContent
      }
      userAuthenticationAuditApi(params).then(res => {
        detailHandleFinish(res, 'RegisteredUser')
        isAuditDialog.value = false;
        state.auditType = 'SUCCESS'
        isRejectDialog.value = false
      })
      break;
    case 0:
      isAuditDialog.value = false;
      isRejectDialog.value = false
      break;
  }
}

//拒绝
const reject = (type) => {//1:个人 2：企业
  isRejectDialog.value = true
  state.auditContent = '';
  state.auditType = 'BACK'
}

</script>

<style lang="scss" scoped>
.certification-container {
  padding: 40px 20px 20px 80px;
  .dialog-footer {
    .el-button {
      width: 80px;
    }
  }
}
</style>
